<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 事件处理 </title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            color: white;
            text-align: center;
            margin: 40px auto;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div id="box">
        <span>测试</span>
    </div>
    
</body>
<script src="../lib/jquery.min.js"></script>
<script>
    $(function(){
          //添加点击事件处理
          //1.原生的dom操作
          //1.1  传统写法
        //   document.queryCommandEnabled("#box")
        //           .onclick = function(){
        //               alert('哈哈');
        //           }
          //1.2推荐写法      
        //   document.querySelector('#box')
        //            .addEventListener('click',function(){
        //                alert('哈哈');
        //            }) 

        //2.  jQuery 写法
        //2.1  调用事件类型对应的方法
        // $("#box").click(function(){
        //     alert('哈哈');
        // });
        //2.2   on方法
        // $("#box").on('click',function(){
        //     alert('哈哈');
        // });

        //  对多个事件类型绑定同一个事件处理函数
        // $("#box").on('click dblclick',function(){
        //     alert('哈哈');
        // });

        //  对同一个事件类型绑定多个事件处理函数
        // $("#box").on('click',function(){
        //     alert('哈哈');
        // });
        // $("#box").on('click',function(){
        //     alert('嘻嘻');
        // });


     
        //
        $("#box").on({
            mouseout:function(){
                alert('哈哈');
            },
            mouseover:function(){
                alert('xixi');
            },
        });
    
    
        //
        $("#box").one('click',function(){
             alert('哈哈');
         });


    });
</script>
</html>